<template>
	<view class="personalData bac_f8f8f8">
		<view class="headers display_between"  >
			<view class="headers_left display_between">
				<u-avatar :src="userInfo.wx_img" size="70"></u-avatar>
				<view class="headers_user">
					<view class="header_vip">
						<text>{{ userInfo.wx_name }}</text>
						<text>{{ userInfo.vip_name }}</text>
					</view>
                    <view class="header_info">
                        <text>ID: {{ userInfo.id }}</text>
                        <text class="header_info_unit"></text>
                        <text>{{userInfo.integral }}积分</text>
                    </view>
				</view>
			</view>
<!-- 			<view class="headers_right">
				<u-icon name="arrow-right" color="#FFF" size="40rpx"></u-icon>
			</view> -->
		</view>
<!-- 		<view class="order">
			<view class="Me_order">
				<view class="order_title display_between">
					<text>我的订单</text>
					<text>查看全部</text>
				</view>
				<view class="order_list Function">
					<view class="order_content" @click="integra">
						<image mode=""></image>
						<text>签到有礼</text>
					</view>
					<view class="order_content" @click="setMong">
						<image mode=""></image>
						<text>积分订单</text>
					</view>
					<view class="order_content" @click="setAct">
						<image :src="$u.$assets.wodehuodong" mode=""></image>
						<text>我的活动</text>
					</view>
					<view class="order_content" @click="$u.route('/pages/Points/packaging/list')">
						<image :src="$u.$assets.fenzhuangdingdan" mode=""></image>
						<text>分装订单</text>
					</view>
					
				</view>
			</view>

		</view> -->
<!-- 		<view class="order">
			<view class="Me_order">
				<view class="order_title display_between">
					<text>常用功能</text>
					<text></text>
				</view>
				<view class="order_list Function">
					<view class="order_content" @click="integra">
						<image :src="$u.$assets.qiandaoyouli" mode=""></image>
						<text>签到有礼</text>
					</view>
					<view class="order_content" @click="$u.route('/pages/user/cangjiu/cangjiu')">
						<image :src="$u.$assets.wodecangjiu" mode=""></image>
						<text>我的藏酒</text>
					</view>
					<view class="order_content" @click="$u.route('/pages/user/Transfer/Transfer')">
						<image :src="$u.$assets.wodezhuanzen" mode=""></image>
						<text>我的转赠</text>
					</view>
					<view class="order_content" @click="Consignment">
						<image :src="$u.$assets.wodejishou" mode=""></image>
						<text>我的寄售</text>
					</view>
				</view>
			</view>

		</view> -->
		<view class="order cell">
            <view class="order_title display_between">
                <text>基本功能</text>
                <text></text>
            </view>
            <view class="Fun-box">
                <view class="order_Fun">
                    <view class="Fun_list" @click="$u.route('/pages/integral/orderList')">
                        <text class="Fun_list-text">我的订单</text>
                        <u-icon name="arrow-right"></u-icon>
                    </view>
                    <view class="Fun_list" @click="$u.route('/pages/integral/sign-in')">
                        <text class="Fun_list-text">签到有礼</text>
                        <u-icon name="arrow-right"></u-icon>
                    </view>
                    <view class="Fun_list" @click="$u.route('/pages/index/about')">
                        <text class="Fun_list-text">企业介绍</text>
                        <u-icon name="arrow-right"></u-icon>
                    </view>
                </view>
                
<!--                <view class="order_Fun">
                    <view class="Fun_list"  @click="$u.route('/pages/about/about', { id: 6})">
                        <text class="Fun_list-text">会员权益（说明）</text>
                        <u-icon name="arrow-right"></u-icon>
                    </view>
                    <view class="Fun_list"  @click="$u.route('/pages/news/list')">
                        <text class="Fun_list-text">平台公告</text>
                        <u-icon name="arrow-right"></u-icon>
                    </view>
                    <view class="Fun_list" @click="$u.vuex.dispatch('user/makePhoneCallServer')">
                        <text class="Fun_list-text">联系我们</text>
                        <u-icon name="arrow-right"></u-icon>
                    </view>
                    <view class="Fun_list"  @click="$u.route('/pages/about/about', { id: 1})">
                        <text class="Fun_list-text">关于我们</text>
                        <u-icon name="arrow-right"></u-icon>
                    </view>
                </view> -->
            </view>
            
		</view>
        
        <view style="height: 60rpx;"></view>
        <u-tabbar
        	:value="1"
        	:fixed="true"
        	:placeholder="false"
        	:safeAreaInsetBottom="false"
        >
        	<u-tabbar-item text="积分商城" icon="home"  @click="$u.route('/pages/integral/list')"></u-tabbar-item>
        	<u-tabbar-item text="我的" icon="account" ></u-tabbar-item>
        </u-tabbar>
	</view>
</template>

<script>
    import {Resource_url, Http_url} from "@/config/config.js"
	export default {
		name: "personalData",
		data() {
			return {
                Resource_url
			};
		},
        onShow() {
            this.$store.dispatch('USERINFO')
        },
        computed: {
            userInfo(){
               return this.$store.state.app.userInfou || {}
            }
        },
		methods:{
			integra(){
				this.$u.route("pages/tabbar/integralPage")
			},
			setAddres(){
				this.$u.route('pages/Points/address/address')
			},
			setList(){
				this.$u.route('pages/user/Order_List/Order_List')
			},
			setMong(){
				this.$u.route('pages/Points/Order_List/Order_List')
			},
			setAct(){
				this.$u.route('pages/user/RegistrationProject/RegistrationProject')
			},
			Consignment(){
				this.$u.route('pages/user/Consignment/Consignment')
			},
            syncData(){
                this.$u.route('pages/user/SyncData/SyncData')
            }
		}
	}
</script>

<style lang="scss">
     @import '@/libs/PublicStyle.scss';
    page{
        background-color: #F3F5F3;
        
    }
    .personalData{
        // padding-bottom: 100rpx;
    }
	.headers {
		width: 100%;
		height: 300rpx;
		background-color: #B29062
	}

	.headers_left {
		margin-left: 30rpx;
        color: #fff;
	}

	.headers_right {
		margin-right: 40rpx;
		font-size: 35rpx;
		font-weight: 600;
        
	}

	.headers_user {
		margin-left: 20rpx;

		.header_info {
			display: inline-block;
			text-align: center;
			line-height: 50rpx;
			// width: 160rpx;
            font-size: 26rpx;
            padding-left: 10rpx;
			height: 50rpx;
			// background: #B29062;
			border-radius: 10rpx;
            color: #fff;
            
            .header_info_unit{
                margin: 0 20rpx;
            }
		}
	}

	.header_vip {
		padding-bottom: 20rpx;

		>text:nth-child(2) {
			display: inline-block;
			text-align: center;
			line-height: 50rpx;
			margin-left: 40rpx;
            padding: 0 10rpx;
			// width: 80rpx;
			height: 50rpx;
			// background: #fcff39;
			border-radius: 10rpx;
            color: #fff;
		}
	}

	.personalData {
		// padding-top: 100rpx;

	}

	.order {
		margin-top: 20rpx;
        padding: 30rpx 0;
        background-color: #fff;
	}


	.order_title {
		padding: 0 30rpx;
		width: 690rpx;
		height: 100rpx;
		font-weight: 600;
        background-color: #fff;
		// border-bottom: 1rpx solid #F8F8F8;
	}

	.order_list {
		width: 690rpx;
		min-height: 100rpx;
		padding: 0 30rpx;
	}

	.order_content {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
		width: 120rpx;
		min-height: 140rpx;
		font-size: 26rpx;

		>image {
			width: 64rpx;
			height: 64rpx;
		}

		>text {
			display: flex;
			padding-top: 20rpx;
		}
	}

	.Function {
		display: flex;
		flex-wrap: wrap;

		>view {
			margin-right: 70rpx;
		}

		>view:nth-child(4n) {
			margin-right: 0rpx;
		}
	}
    
    .cell{
        padding-bottom: 0 !important;
    }
    .Fun-box{
        background-color: #F3F5F3;
    }
	.order_Fun {
        border-top: 1px solid #E0E1E3;
        border-bottom: 1px solid #E0E1E3;
        margin-bottom: 15rpx;
        background-color: #fff;
        
        
		
		.Fun_list {
			display: flex;
			padding: 20rpx 20rpx 20rpx 0rpx;
            line-height: 50rpx;
            // margin-left: 25rpx;
            
            .Fun_list-text{
                display: block;
                flex: 1;
                margin-right: 20rpx;
            }
		}
        .Fun_list:not(:last-child){
            border-bottom: 1px solid #E0E1E3;
        }
        
		text {
			margin-left: 30rpx;
		}
	}
</style>